<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_967424_eqlo303jzd6.css" />
		<style>
			.mui-content {
				background: url(images/indexbg.png) no-repeat;
				background-size: 100% 220px;
			}
			
			.mui-table-view {
				margin-bottom: 20px;
			}
			
			#head-img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				border: 3px solid white;
			}
			/*.user:after {
				position: absolute;
				bottom: 14px;
				content: "编辑头像";
				font-size: 12px;
				color: white;
				background: rgba(0, 0, 0, .5);
			}*/
			
			.user {
				display: flex!important;
				align-items: center;
				justify-content: center;
				position: relative;
			}
			
			.nobac {
				background: none;
				padding: 0;
				margin: 0;
			}
			
			#app .head {
				font-size: 17px;
				line-height: 44px;
				text-align: center;
				margin: 0;
				color: white;
			}
			
			h4 {
				text-align: center;
				color: white;
				font-weight: 500;
			}
			
			ul {
				padding: 0;
			}
			
			.tab_box {
				display: flex;
				justify-content: space-around;
				margin-top: 10px;
				/*background: white;*/
			}
			
			.tap_item {
				flex: 1;
				text-align: center;
				padding: 15px 0;
				color: white;
				position: relative;
			}
			
			.xian:after,
			.xian:before {
				content: "";
				display: block;
				position: absolute;
				top: 25%;
				width: 1px;
				height: 50%;
				background: #D8D8D8;
			}
			
			.xian:before {
				right: 0px;
			}
			
			.list {
				background: white;
				position: relative;
			}
			
			#goout {
				position: fixed;
				bottom: 10px;
				width: 90%;
				margin: 0 5%;
				padding: 10px;
			}
			
			.user_box {
				display: flex;
				justify-content: space-around;
				padding-bottom: 20px;
			}
			
			.user_box>div {
				flex: 1;
				text-align: center;
			}
			
			.user_box p {
				color: white;
			}
			
			.icon-renzheng {
				color: #029C03;
				font-size: 16px;
			}
			
			.ri {
				font-size: 30px;
			}
			
			.qiye {
				display: flex;
				flex-flow: column;
				justify-content: center;
			}
			
			.tab_box .tap_item:active {
				background: rgba(1, 0, 0, .1);
				border-radius: 5px;
			}
			
			.list .iconfont {
				padding-right: 10px;
			}
			
			.ckqiye {
				position: absolute;
				right: 40px;
				top: 10px;
				font-size: 12px;
				padding: 0 5px;
				background: #D9ECE8;
				border-radius: 5px;
				border: 1px solid #D8D8D8;
				z-index: 1;
			}
			
			.zhezhao {
				/*visibility: visible;*/
				/*visible*/
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .5);
				z-index: 2;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
			}
			
			.zhezhao p {
				color: white;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<div id="app">
			<!--默认展示 登陆后消失-->
			<div v-show="isDenglu" class="zhezhao">
				<p>登录后才能操作，去登录</p>
				<button id="btn" type="button" class="mui-btn mui-btn-blue">登录</button>
			</div>

			<div class="mui-content">
				<h1 class="head">我的</h1>
				<ul class="nobac">
					<li class="user_box">
						<!--默认 不显示（0） 如果是 企业用户 显示（1）-->
						<div class="qiye" v-show="isqiye">
							<h4>企业用户</h4>
							<p><i class="iconfont icon-renzheng"></i>已认证</p>
						</div>

						<div class="icon">
							<h4>{{shoujihao}}</h4>
							<a class="user">
								<img class="mui-media-object mui-pull-left head-img" id="head-img" src="images/user_icon.png">
							</a>
						</div>
						<div class="data">
							<p class="yue">{{yue}}月</p>
							<p class="ri">{{ri}}</p>
							<p class="xingqi">星期{{xingqi}}</p>
						</div>
					</li>
				</ul>

				<ul class="list">
					<!--<span class="ckqiye">查看企业信息</span>-->

					<!--默认 不显示（0） 如果是 企业用户 显示（1）-->
					<li class="mui-table-view-cell xinxi" v-show="isqiye">
						<a class="mui-navigate-right">
							<i class="iconfont icon-icon-test"></i> 基本信息
						</a>
					</li>

					<li class="mui-table-view-cell fengcai" v-show="isqiye">
						<a class="mui-navigate-right">
							<i class="mui-icon mui-icon-image"></i> 风采展示
						</a>
					</li>

				</ul>
				<!--默认消失 登陆后展示-->
				<button v-show="!isDenglu" id="goout" type="button" class="mui-btn mui-btn-blue mui-btn-block">注销登录</button>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/vue.js"></script>
	<script>
		//		localStorage.clear();
		mui.init();
		var riqi = getdate();
		var app = new Vue({
			el: "#app",
			data: {
				yue: riqi.yue,
				ri: riqi.ri,
				xingqi: riqi.xingqi,
				isDenglu: 1, //默认 显示（1）  登陆后消失（0） 
				isqiye: 0, //默认 不显示（0） 如果是 企业用户 显示（1）
				shoujihao: "",
			}
		})

		window.addEventListener('shuaxin', function() {
			gengxin();
		});

		mui("body").on('tap', '.xinxi', function() {
			tiao('xinxi');
		})
		mui("body").on('tap', '.fengcai', function() {
			tiao('fengcai');
		})

		mui.plusReady(function() {
			//			var toke = [{
			//				genPhone:'13512451236',
			//				userType:'正式企业',
			//				
			//			}]
			//			cun('TOKEN',JSON.stringify(toke));
			gengxin();
			document.getElementById("goout").addEventListener("tap", out);

		})
		document.getElementById("btn").addEventListener("tap", function() {
			tiao('yonghudenglu')
		});

		//		退出登录
		function out() {
			var btnArray = ['是', '否'];
			mui.confirm('您确定退出?', '', btnArray, function(e) {
				if(e.index == 0) {
					console.log("====="+JSON.parse(localStorage.getItem("TOKEN")).id);
					mui.ajax(URL + 'meGeneralUser!outLogon', {
						data: {
							id: JSON.parse(localStorage.getItem("TOKEN")).id,
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							console.log('退出时间记录成功')
						},
						error: function(xhr, type, errorThrown) {
							console.log(type);
						}
					});
					localStorage.clear();
					mui.toast('已成功退出');
					setTimeout(function() {
						gengxin();

					}, 500)
				}
			})
		}

		//是否登陆 跟新数据
		function gengxin() {
			try {
				if(TOKEN()) {
					var ibj = JSON.parse(TOKEN());
					app.isDenglu = 0;
					app.shoujihao = ibj.genPhone;
					//			根据 企业类型判断
					if(ibj.userType === "正式企业") {
						app.isqiye = 1; //不显示
					} else {
						app.isqiye = 0;
					}
				} else {
					app.isDenglu = 1;
					app.isqiye = 0; //1.不显示
					app.shoujihao = "";
				}
			} catch(e) {
				app.isDenglu = 1;
				app.isqiye = 0; //1.不显示
				app.shoujihao = "";
				//TODO handle the exception
			}

		}
		//	console.log( TOKEN())
		//		function getdata() {
		//			mui.ajax(URL + '', {
		//				data: parames,
		//				dataType: 'json', //服务器返回json格式数据
		//				type: 'post', //HTTP请求类型
		//				timeout: 10000, //超时时间设置为10秒；
		//				success: function(data) {
		//
		//				},
		//				error: function(xhr, type, errorThrown) {
		//
		//				}
		//			});
		//		}

		//		//更换头像
		//		mui("#app").on("tap", "#head-img", function(e) {
		//			if(mui.os.plus) {
		//				var a = [{
		//					title: "拍照"
		//				}, {
		//					title: "从手机相册选择"
		//				}];
		//				plus.nativeUI.actionSheet({
		//					title: "修改头像",
		//					cancel: "取消",
		//					buttons: a
		//				}, function(b) {
		//					switch(b.index) {
		//						case 0:
		//							break;
		//						case 1:
		//							getImage();
		//							break;
		//						case 2:
		//							galleryImg();
		//							break;
		//						default:
		//							break
		//					}
		//				})
		//			}
		//
		//		});

		//		function getImage() {
		//			var c = plus.camera.getCamera();
		//			c.captureImage(function(e) {
		//				plus.io.resolveLocalFileSystemURL(e, function(entry) {
		//					var s = entry.toLocalURL() + "?version=" + new Date().getTime();
		//					console.log(s);
		//					document.getElementById("head-img").src = s;
		//					document.getElementById("head-img1").src = s;
		//					//变更大图预览的src
		//					//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
		//					document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
		//				}, function(e) {
		//					console.log("读取拍照文件错误：" + e.message);
		//				});
		//			}, function(s) {
		//				console.log("error" + s);
		//			}, {
		//				filename: "_doc/head.jpg"
		//			})
		//		}
		//
		//		function galleryImg() {
		//			plus.gallery.pick(function(a) {
		//				plus.io.resolveLocalFileSystemURL(a, function(entry) {
		//					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
		//						root.getFile("head.jpg", {}, function(file) {
		//							//文件已存在
		//							file.remove(function() {
		//								console.log("file remove success");
		//								entry.copyTo(root, 'head.jpg', function(e) {
		//										var e = e.fullPath + "?version=" + new Date().getTime();
		//										document.getElementById("head-img").src = e;
		//										document.getElementById("head-img1").src = e;
		//										//变更大图预览的src
		//										//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
		//										document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
		//									},
		//									function(e) {
		//										console.log('copy image fail:' + e.message);
		//									});
		//							}, function() {
		//								console.log("delete image fail:" + e.message);
		//							});
		//						}, function() {
		//							//文件不存在
		//							entry.copyTo(root, 'head.jpg', function(e) {
		//									var path = e.fullPath + "?version=" + new Date().getTime();
		//									document.getElementById("head-img").src = path;
		//									document.getElementById("head-img1").src = path;
		//									//变更大图预览的src
		//									//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
		//									document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
		//								},
		//								function(e) {
		//									console.log('copy image fail:' + e.message);
		//								});
		//						});
		//					}, function(e) {
		//						console.log("get _www folder fail");
		//					})
		//				}, function(e) {
		//					console.log("读取拍照文件错误：" + e.message);
		//				});
		//			}, function(a) {}, {
		//				filter: "image"
		//			})
		//		};

		//		获取当前日期
		function getdate() {
			var date = new Date;
			var yue = date.getMonth() + 1;
			var ri = date.getDate();
			var xingqi = xing();

			function xing() {
				var day = date.getDay();
				if(day === 0) {
					day = '日'
				} else if(day === 1) {
					day = '一'
				} else if(day === 2) {
					day = '二'
				} else if(day === 3) {
					day = '三'
				} else if(day === 4) {
					day = '四'
				} else if(day === 5) {
					day = '五'
				} else if(day === 6) {
					day = '六'
				}
				return day;
			}
			return {
				yue: yue,
				ri: ri,
				xingqi: xingqi
			}
		}
	</script>

</html>